<template>
  <div class="user-list-container">
    <div class="page-header">
      <h2>用户管理</h2>
      <p>系统用户列表与管理</p>
    </div>

    <!-- 搜索和操作区域 -->
    <el-card class="search-card" shadow="hover">
      <div class="search-container">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item label="用户名">
            <el-input 
              v-model="searchForm.name" 
              placeholder="请输入用户名" 
              clearable 
              @clear="handleInputClear('name')"
              @input="debounceSearch"
            />
          </el-form-item>
          <el-form-item label="角色" v-if="store.getters.userRole !== '党支部'">
            <el-select 
              v-model="searchForm.role" 
              placeholder="请选择角色" 
              clearable
              @change="handleRoleChange"
            >
              <el-option label="管理员" value="管理员" />
              <el-option label="用户" value="用户" />
              <el-option label="党支部" value="党支部" />
            </el-select>
          </el-form-item>
          <el-form-item label="政治面貌">
            <el-select 
              v-model="searchForm.politicalStatus" 
              placeholder="请选择政治面貌" 
              clearable
              class="political-status-select"
              @change="handlePoliticalStatusChange"
            >
              <el-option label="群众" value="群众" />
              <el-option label="正式党员" value="正式党员" />
              <el-option label="预备党员" value="预备党员" />
              <el-option label="入党积极分子" value="入党积极分子" />
              <el-option label="发展对象" value="发展对象" />
            </el-select>
          </el-form-item>
          <el-form-item label="所属系">
            <el-input 
              v-model="searchForm.dept" 
              placeholder="请输入所属系" 
              clearable 
              @clear="handleInputClear('dept')"
              @input="debounceSearch"
            />
          </el-form-item>
          <el-form-item label="账号">
            <el-input 
              v-model="searchForm.account" 
              placeholder="请输入账号" 
              clearable 
              @clear="handleInputClear('account')"
              @input="debounceSearch"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchUsers">
              <el-icon><Search /></el-icon> 搜索
            </el-button>
            <el-button @click="resetSearch">
              <el-icon><Refresh /></el-icon> 重置
            </el-button>
            <el-button type="success" @click="handleAddUser">
              <el-icon><Plus /></el-icon> 新增用户
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      
      <!-- 当前筛选条件展示 -->
      <div class="current-filters" v-if="hasActiveFilters">
        <span class="filter-label">当前筛选条件:</span>
        <el-tag v-if="searchForm.name" closable @close="clearFilter('name')" class="filter-tag">
          用户名: {{ searchForm.name }}
        </el-tag>
        <el-tag v-if="searchForm.account" closable @close="clearFilter('account')" class="filter-tag">
          账号: {{ searchForm.account }}
        </el-tag>
        <el-tag v-if="searchForm.role" closable @close="clearFilter('role')" class="filter-tag">
          角色: {{ searchForm.role }}
        </el-tag>
        <el-tag v-if="searchForm.politicalStatus" closable @close="clearFilter('politicalStatus')" class="filter-tag">
          政治面貌: {{ searchForm.politicalStatus }}
        </el-tag>
        <el-tag v-if="searchForm.dept" closable @close="clearFilter('dept')" class="filter-tag">
          所属系: {{ searchForm.dept }}
        </el-tag>
        <el-button type="text" @click="resetSearch" class="clear-all-btn">清除所有筛选</el-button>
      </div>
    </el-card>

    <!-- 用户列表表格 -->
    <el-card class="table-card" shadow="hover" v-loading="loading">
      <el-table :data="userList" border style="width: 100%" row-key="id">
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="account" label="账号" min-width="120" />
        <el-table-column prop="name" label="用户名" min-width="120" />
        <el-table-column prop="role" label="角色" width="100">
          <template #default="scope">
            <el-tag :type="getRoleTagType(scope.row.role)">{{ scope.row.role }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="email" label="邮箱" min-width="180" />
        <el-table-column prop="phone" label="手机号" min-width="120" />
        <el-table-column prop="politicalStatus" label="政治面貌" width="120">
          <template #default="scope">
            <el-tag :type="getPoliticalStatusTagType(scope.row.politicalStatus)">
              {{ scope.row.politicalStatus || '群众' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="dept" label="所属系" min-width="120" />
        <el-table-column prop="createTime" label="创建时间" min-width="170" :formatter="formatDateTime" />
        <el-table-column label="操作" fixed="right" width="180">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)"
              :disabled="false">
              <el-icon><Edit /></el-icon> 编辑
            </el-button>
            <el-button 
              size="small" 
              type="danger" 
              @click="handleDelete(scope.row)"
              :disabled="(scope.row.role === '管理员' && userList.filter(item => item.role === '管理员').length <= 1) || 
                        (store.getters.userRole === '党支部' && scope.row.role !== '用户')"
            >
              <el-icon><Delete /></el-icon> 删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 新增/编辑用户对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogType === 'add' ? '新增用户' : '编辑用户'"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form :model="userForm" :rules="userFormRules" ref="userFormRef" label-width="100px">
        <el-form-item label="头像">
          <div class="avatar-container">
            <el-avatar :size="100" :src="avatarDemoUrl"></el-avatar>
            <div class="avatar-upload">
              <el-upload
                action="http://localhost:8081/user/uploadImage"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :on-error="handleAvatarError"
                :before-upload="beforeAvatarUpload"
              >
                <el-button type="primary" size="small" circle>
                  <el-icon><Edit /></el-icon>
                </el-button>
              </el-upload>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="账号" prop="account">
          <el-input v-model="userForm.account" placeholder="请输入账号" :disabled="formDisabled.account || dialogType === 'edit'" />
        </el-form-item>
        <el-form-item label="用户名" prop="name">
          <el-input v-model="userForm.name" placeholder="请输入用户名" :disabled="formDisabled.name" />
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select v-model="userForm.role" placeholder="请选择角色" :disabled="formDisabled.role">
            <el-option label="管理员" value="管理员" v-if="store.getters.userRole !== '党支部'" />
            <el-option label="用户" value="用户" />
            <el-option label="党支部" value="党支部" v-if="store.getters.userRole !== '党支部'" />
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="userForm.email" placeholder="请输入邮箱" :disabled="formDisabled.email" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="userForm.phone" placeholder="请输入手机号" :disabled="formDisabled.phone" />
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input-number 
            v-model="userForm.age" 
            :min="1" 
            :max="120" 
            :disabled="formDisabled.age"
            placeholder="请输入年龄"
          />
        </el-form-item>
        <el-form-item label="政治面貌" prop="politicalStatus">
          <el-select v-model="userForm.politicalStatus" placeholder="请选择政治面貌" class="political-status-select" :disabled="formDisabled.politicalStatus">
            <el-option label="群众" value="群众" />
            <el-option label="正式党员" value="正式党员" />
            <el-option label="预备党员" value="预备党员" />
            <el-option label="入党积极分子" value="入党积极分子" />
            <el-option label="发展对象" value="发展对象" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属系" prop="dept">
          <el-input v-model="userForm.dept" placeholder="请输入所属系" :disabled="formDisabled.dept" />
        </el-form-item>
        <el-form-item label="密码" prop="pwd" v-if="dialogType === 'add'">
          <el-input v-model="userForm.pwd" placeholder="请输入密码" show-pwd />
        </el-form-item>
        <template v-else>
          <el-form-item label="修改密码">
            <el-switch v-model="showPasswordField" />
          </el-form-item>
          <el-form-item label="新密码" prop="pwd" v-if="showPasswordField">
            <el-input v-model="userForm.pwd" placeholder="请输入新密码" show-pwd />
          </el-form-item>
        </template>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitUserForm" :loading="submitting">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Search, Refresh, Plus, Edit, Delete } from '@element-plus/icons-vue';
import { getUserList, getUserCount, saveUser, deleteUser, getUserListAlt } from '@/api/auth';
import { useStore } from 'vuex';

const store = useStore();

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const loading = ref(false);
const userList = ref([]);

// 搜索表单
const searchForm = reactive({
  name: '',
  role: '',
  account: '',
  politicalStatus: '',
  dept: ''
});

// 新增/编辑用户相关
const dialogVisible = ref(false);
const dialogType = ref('add'); // 'add' 或 'edit'
const userFormRef = ref(null);
const submitting = ref(false);
const userForm = ref({
  id: '',
  account: '',
  name: '',
  role: '',
  email: '',
  phone: '',
  pwd: '',
  politicalStatus: '',
  dept: '',
  age: null,
  avatarUrl: '' // 添加头像字段
});

// 是否显示密码输入框（编辑模式）
const showPasswordField = ref(false);

// 默认头像
const defaultAvatar = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png';

// 头像URL计算属性
const avatarDemoUrl = computed(() => {
  return userForm.value.avatarUrl || defaultAvatar;
});

// 表单验证规则
const userFormRules = {
  account: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  role: [
    { required: true, message: '请选择角色', trigger: 'change' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  age: [
    { required: true, message: '请输入年龄', trigger: 'blur' },
    { type: 'number', min: 1, max: 120, message: '年龄必须在1-120岁之间', trigger: 'blur' }
  ],
  pwd: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
  ],
  politicalStatus: [
    { required: true, message: '请选择政治面貌', trigger: 'change' }
  ],
  dept: [
    { required: true, message: '请输入所属系', trigger: 'blur' }
  ]
};

// 新增/编辑用户相关
const formDisabled = ref({
  account: true,
  name: true,
  role: true,
  email: true,
  phone: true,
  politicalStatus: false,
  dept: false,
  age: false
});

// 初始化加载数据
onMounted(() => {
  // 获取当前用户所有信息
  const currentUser = store.getters.currentUser;
  console.log('当前用户完整信息:', currentUser);
  
  // 强制设置角色，确保角色限制正确应用
  // 1. 先检查localStorage
  const storedRole = localStorage.getItem('userRole');
  console.log('localStorage中的角色:', storedRole);
  
  // 2. 如果当前用户是党支部角色，强制设置查询条件
  if (storedRole === '党支部' || (currentUser && currentUser.role === '党支部')) {
    console.log('确认为党支部角色，强制设置查询条件');
    searchForm.role = '用户';
    // 确保store中的角色状态正确
    if (storedRole !== '党支部' && currentUser && currentUser.role === '党支部') {
      store.commit('SET_ROLE', '党支部');
    }
  }
  
  fetchUserList();
});

// 获取用户列表
const fetchUserList = async () => {
  loading.value = true;
  try {
    // 获取当前用户角色
    const currentUserRole = store.getters.userRole;
    
    // 构建查询条件
    let queryData = {
      name: searchForm.name,
      account: searchForm.account
    };
    
    // 添加政治面貌查询条件
    if (searchForm.politicalStatus) {
      // 尝试使用不同字段名，因为后端可能使用不同名称
      queryData.politicalStatus = searchForm.politicalStatus;  // 首选字段名
      queryData.political_status = searchForm.politicalStatus; // 下划线格式
      queryData.political = searchForm.politicalStatus;        // 简化字段名
    }
    
    // 如果是党支部，只能查看角色为"用户"的用户
    if (currentUserRole === '党支部') {
      queryData.role = '用户';
    } 
    // 如果是其他角色且在搜索框中选择了角色
    else if (searchForm.role) {
      queryData.role = searchForm.role;
    }
    
    // 1. 获取符合条件的用户总数
    const countResponse = await getUserCount(queryData);
    if (countResponse.data.code === 200) {
      total.value = countResponse.data.data.count || 0;
    } else {
      ElMessage.error(countResponse.data.msg || '获取用户总数失败');
      loading.value = false;
      return;
    }
    
    // 2. 获取分页用户列表
    try {
      const response = await (queryData, currentPage.value, pageSize.value);
      
      if (response.data.code === 200) {
        userList.value = response.data.data.page.records || [];
      } else {
        ElMessage.error(response.data.msg || '获取用户列表失败');
      }
    } catch (error) {
      // 如果第一种方式失败，尝试使用备用方法（URL参数）
      const response = await getUserListAlt(
        { name: queryData.name, account: queryData.account, role: queryData.role, politicalStatus: searchForm.politicalStatus },
        currentPage.value, 
        pageSize.value, 
      );
      
      if (response.data.code === 200) {
        userList.value = response.data.data.page.records || [];
      } else {
        ElMessage.error(response.data.msg || '获取用户列表失败');
      }
    }
  } catch (error) {
    console.error('获取用户列表失败:', error);
    ElMessage.error('获取用户列表失败，请稍后重试');
  } finally {
    loading.value = false;
  }
};

// 搜索用户
const searchUsers = () => {
  currentPage.value = 1;
  
  // 确保党支部角色只能看到用户角色的数据
  enforceRoleRestrictions();
  
  fetchUserList();
};

// 重置搜索条件
const resetSearch = () => {
  Object.keys(searchForm).forEach(key => {
    searchForm[key] = '';
  });
  
  // 强制检查角色限制
  const storedRole = localStorage.getItem('userRole');
  const currentUser = store.getters.currentUser;
  
  // 如果是党支部，在重置后需要强制设置role为"用户"
  if (storedRole === '党支部' || 
      store.getters.userRole === '党支部' || 
      (currentUser && currentUser.role === '党支部')) {
    console.log('重置搜索：强制应用党支部角色限制');
    searchForm.role = '用户';
  }
  
  currentPage.value = 1;
  fetchUserList();
};

// 处理分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val;
  
  // 确保党支部角色只能看到用户角色的数据
  enforceRoleRestrictions();
  
  fetchUserList();
};

// 处理页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val;
  
  // 确保党支部角色只能看到用户角色的数据
  enforceRoleRestrictions();
  
  fetchUserList();
};

// 强制应用角色限制
const enforceRoleRestrictions = () => {
  const storedRole = localStorage.getItem('userRole');
  const currentUser = store.getters.currentUser;
  
  if (storedRole === '党支部' || 
      store.getters.userRole === '党支部' || 
      (currentUser && currentUser.role === '党支部')) {
    searchForm.role = '用户';
  }
};

// 根据角色获取标签类型
const getRoleTagType = (role) => {
  switch (role) {
    case '管理员':
      return 'danger';
    case '党支部':
      return 'warning';
    case '用户':
      return 'info';
    default:
      return '';
  }
};

// 根据政治面貌获取标签类型
const getPoliticalStatusTagType = (politicalStatus) => {
  switch (politicalStatus) {
    case '正式党员':
      return 'success';
    case '预备党员':
      return 'warning';
    case '入党积极分子':
      return 'info';
    case '发展对象':
      return 'primary';
    default:
      return '';
  }
};

// 格式化日期时间
const formatDateTime = (row, column, cellValue) => {
  if (!cellValue) return '';
  const date = new Date(cellValue);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

// 处理添加用户
const handleAddUser = () => {
  dialogType.value = 'add';
  dialogVisible.value = true;
  resetUserForm();
  
  // 如果当前是党支部角色，自动设置新用户角色为"用户"
  if (store.getters.userRole === '党支部') {
    userForm.value.role = '用户';
  }
};

// 处理编辑用户
const handleEdit = (row) => {
  dialogType.value = 'edit';
  dialogVisible.value = true;
  resetUserForm();
  
  // 加载用户数据到表单
  Object.keys(userForm.value).forEach(key => {
    if (key in row) {
      userForm.value[key] = row[key];
    }
  });
  
  // 如果当前是党支部角色：
  if (store.getters.userRole === '党支部') {
    // 如果编辑的不是普通用户，则只允许修改政治面貌
    if (row.role !== '用户') {
      // 创建临时的禁用控制对象
      formDisabled.value = {
        account: true,
        name: true,
        role: true,
        email: true,
        phone: true,
        politicalStatus: false // 只允许修改政治面貌
      };
    } else {
      // 如果是编辑普通用户，锁定角色字段，但允许修改其他信息
      formDisabled.value = {
        account: true, // 编辑时账号不可修改
        role: true,    // 锁定角色字段
        politicalStatus: false // 允许修改政治面貌
      };
      userForm.value.role = '用户'; // 确保普通用户角色不变
    }
  } else {
    // 非党支部角色编辑用户，只禁用账号字段
    formDisabled.value = {
      account: true // 编辑时账号不可修改
    };
  }
};

// 处理删除用户
const handleDelete = (row) => {
  // 党支部角色只能删除普通用户
  if (store.getters.userRole === '党支部' && row.role !== '用户') {
    ElMessage.warning('党支部角色只能删除普通用户');
    return;
  }
  
  ElMessageBox.confirm(`确定要删除用户 "${row.name}" 吗？此操作无法恢复。`, '删除确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      loading.value = true;
      const response = await deleteUser(row.id);
      if (response.data.code === 200) {
        ElMessage.success(`已删除用户 "${row.name}"`);
        fetchUserList(); // 刷新用户列表
      } else {
        ElMessage.error(response.data.msg || '删除失败');
      }
    } catch (error) {
      console.error('删除用户失败:', error);
      ElMessage.error('删除失败，请稍后重试');
    } finally {
      loading.value = false;
    }
  }).catch(() => {
    // 取消删除，不做任何操作
  });
};

// 重置用户表单
const resetUserForm = () => {
  if (userFormRef.value) {
    userFormRef.value.resetFields();
  }
  userForm.value = {
    id: '',
    account: '',
    name: '',
    role: '',
    email: '',
    phone: '',
    pwd: '',
    politicalStatus: '',
    dept: '',
    age: null,
    avatarUrl: ''
  };
  showPasswordField.value = false;
  
  // 重置禁用状态
  formDisabled.value = {
    account: false,
    name: false,
    role: false,
    email: false,
    phone: false,
    politicalStatus: false,
    dept: false,
    age: false
  };
};

// 提交用户表单
const submitUserForm = async () => {
  if (!userFormRef.value) return;
  
  // 如果是编辑模式且没有选择修改密码，则删除密码字段
  if (dialogType.value === 'edit' && !showPasswordField.value) {
    delete userForm.value.pwd;
  }
  
  // 如果是党支部角色，根据不同情况处理
  if (store.getters.userRole === '党支部') {
    // 新增用户时强制设置角色为"用户"
    if (dialogType.value === 'add') {
      userForm.value.role = '用户';
    } 
    // 编辑非普通用户时，确保只更新政治面貌
    else if (userForm.value.role !== '用户') {
      // 创建一个只包含id和政治面貌的对象
      const politicalUpdateOnly = {
        id: userForm.value.id,
        politicalStatus: userForm.value.politicalStatus
      };
      
      try {
        submitting.value = true;
        const response = await saveUser(politicalUpdateOnly);
        
        if (response.data.code === 200) {
          ElMessage.success('政治面貌更新成功');
          dialogVisible.value = false;
          fetchUserList();
        } else {
          ElMessage.error(response.data.msg || '更新失败');
        }
      } catch (error) {
        console.error('保存用户失败:', error);
        ElMessage.error('保存失败，请稍后重试');
      } finally {
        submitting.value = false;
      }
      return;
    }
  }
  
  await userFormRef.value.validate(async (valid) => {
    if (valid) {
      submitting.value = true;
      
      try {
        // 调用API保存用户信息
        const response = await saveUser(userForm.value);
        
        if (response.data.code === 200) {
          ElMessage.success(dialogType.value === 'add' ? '用户添加成功' : '用户更新成功');
          dialogVisible.value = false;
          fetchUserList(); // 刷新用户列表
        } else {
          // 处理错误情况，如账号已存在等
          ElMessage.error(response.data.msg || (dialogType.value === 'add' ? '账号已存在' : '更新失败'));
        }
      } catch (error) {
        console.error('保存用户失败:', error);
        ElMessage.error('保存失败，请稍后重试');
      } finally {
        submitting.value = false;
      }
    }
  });
};

// 当前筛选条件展示
const hasActiveFilters = computed(() => {
  return Object.values(searchForm).some(value => value !== '');
});

// 清除筛选条件
const clearFilter = (key) => {
  searchForm[key] = '';
  resetSearch();
};

// 处理政治面貌变化
const handlePoliticalStatusChange = () => {
  currentPage.value = 1;
  fetchUserList();
};

// 处理角色变化
const handleRoleChange = () => {
  currentPage.value = 1;
  fetchUserList();
};

// 处理输入框清除
const handleInputClear = (key) => {
  searchForm[key] = '';
  resetSearch();
};

// 处理输入框即时搜索
const debounceSearch = () => {
  currentPage.value = 1;
  fetchUserList();
};

// 处理头像上传前的验证
const beforeAvatarUpload = (file) => {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isJPG) {
    ElMessage.error('上传头像图片只能是 JPG/PNG 格式!');
  }
  if (!isLt2M) {
    ElMessage.error('上传头像图片大小不能超过 2MB!');
  }
  return isJPG && isLt2M;
};

// 处理头像上传成功
const handleAvatarSuccess = (response) => {
  if (response.code === 200) {
    userForm.value.avatarUrl = 'http://127.0.0.1:8081/' + response.data.imgUrl;
    ElMessage.success('头像上传成功');
  } else {
    ElMessage.error(response.msg || '头像上传失败');
  }
};

// 处理头像上传失败
const handleAvatarError = () => {
  ElMessage.error('头像上传失败，请重试');
};
</script>

<style scoped>
.user-list-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  font-size: 24px;
  color: #303133;
  margin: 0 0 8px 0;
}

.page-header p {
  font-size: 14px;
  color: #909399;
  margin: 0;
}

.search-card {
  margin-bottom: 20px;
}

.search-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
}

.table-card {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.dialog-footer {
  padding-top: 20px;
  text-align: right;
}

@media (max-width: 768px) {
  .search-container {
    flex-direction: column;
  }
  
  .action-buttons {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
  }
}

.current-filters {
  margin-top: 10px;
  margin-bottom: 10px;
}

.filter-label {
  font-weight: bold;
  margin-right: 10px;
}

.filter-tag {
  margin-right: 10px;
  margin-bottom: 5px;
  font-weight: bold;
}

.clear-all-btn {
  margin-left: 10px;
  color: #F56C6C;
}

/* 确保下拉框样式正确 */
:deep(.el-select) {
  width: 100%;
}

:deep(.el-select-dropdown) {
  max-width: none !important;
}

:deep(.political-status-select) {
  width: 100%;
}

:deep(.el-select-dropdown__item) {
  white-space: nowrap;
}

.avatar-container {
  position: relative;
  display: inline-block;
  margin: 10px 0;
}

.avatar-upload {
  position: absolute;
  right: 0;
  bottom: 0;
}
</style> 